<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <PluginTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
    <div class="w-3/4 xl:w-4/5" style="overflow: auto">
      <BasicTable @register="registerTable1" style="padding: 16px" />
      <BasicTable @register="registerTable2" style="padding: 16px" />
      <BasicTable @register="registerTable3" style="padding: 16px" />
      <BasicTable @register="registerTable4" style="padding: 16px" />
    </div>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';

  import { BasicTable, useTable } from '/@/components/Table';
  import { getPluginDetail } from '/@/api/system/system';
  import { PageWrapper } from '/@/components/Page';
  import PluginTree from './PluginTree.vue';

  import { columns } from './account.data';

  export default defineComponent({
    name: 'PluginManager',
    components: { BasicTable, PageWrapper, PluginTree },
    setup() {
      const [registerTable1, { setTableData: setTableData1, setLoading: setLoading1 }] = useTable({
        title: '扩展点',
        dataSource: [],
        rowKey: 'id',
        columns,
        useSearchForm: false,
        showTableSetting: true,
        bordered: true,
        canResize: false,
        maxHeight: 500,
      });

      const [registerTable2, { setTableData: setTableData2, setLoading: setLoading2 }] = useTable({
        title: '扩展行为',
        dataSource: [],
        rowKey: 'id',
        columns,
        useSearchForm: false,
        showTableSetting: true,
        bordered: true,
        canResize: false,
        maxHeight: 500,
      });

      const [registerTable3, { setTableData: setTableData3, setLoading: setLoading3 }] = useTable({
        title: '扩展服务',
        dataSource: [],
        rowKey: 'id',
        columns,
        useSearchForm: false,
        showTableSetting: true,
        bordered: true,
        canResize: false,
        maxHeight: 500,
      });

      const [registerTable4, { setTableData: setTableData4, setLoading: setLoading4 }] = useTable({
        title: '扩展项',
        dataSource: [],
        rowKey: 'id',
        columns,
        useSearchForm: false,
        showTableSetting: true,
        bordered: true,
      });

      function handleSelect(pluginId = '') {
        if (pluginId == '0') {
          return;
        }
        setLoading1(true);
        setLoading2(true);
        setLoading3(true);
        setLoading4(true);
        getPluginDetail(pluginId).then((res) => {
          setTableData1(res.extendPoints);
          setTableData2(res.extendActions);
          setTableData3(res.extendItems);
          setTableData4(res.extendServices);
          setLoading1(false);
          setLoading2(false);
          setLoading3(false);
          setLoading4(false);
        });
      }

      return {
        registerTable1,
        registerTable2,
        registerTable3,
        registerTable4,
        handleSelect,
      };
    },
  });
</script>
